<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Document</title>
<!--    <link rel="stylesheet" href="../css/api.css">-->
<!--    <link rel="stylesheet" href="../css/news.css">-->
<!--    <link rel="stylesheet" href="../css/aui_font.css">-->
    <style>
        body{
            background-color: #f0f0f5;
        }
        .list {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .list .item {
            width: 50%;
            margin-bottom: 10px;
        }

        .list .item .box {
            width: calc(100% - 12px);
            margin: 0 auto;
            border-radius: 10px;
            overflow: hidden;
            background: #FFFFFF;
        }

        .list .item .avatar{
            width: 100%;
            height: auto;
        }

        .list .item .user{
            padding: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 10px;
        }
        .list .item .user .info{
            display: flex;
            flex-direction: column;
        }
        .list .item .user .call{
            width: 50px;
        }
        #no_more{
            width: 100%;
            font-size: 12px;
            text-align: center;
            color: #dbdbdb;
        }

    </style>
</head>

<body>
    <div id="view" v-cloak>
       <div class="list">
           <div class="item" v-for="item in ffList" :key="item.user_id">
               <div class="box">
                   <img class="avatar" :src="returnImg(item.user_head)" alt="" @click="goUserInfo(item)">
                   <div class="user">
                       <div class="info">
                           <div class="name">{{item.user_name}}</div>
                           <div v-if="type == 0">{{item.video_price}}/分钟</div>
                           <div v-else>{{item.voice_price}}/分钟</div>
                       </div>
                       <img class="call" v-if="type == 0" src="../image/supei_video.png" alt="" @click="openLM(item)">
                       <img class="call" v-else src="../image/supei_call.png" alt="" @click="openLM(item)">
                   </div>
               </div>
           </div>
       </div>
        <div id="no_more"></div>
    </div>

</body>
<script src="../script/api.js"></script>
<script src="../script/jquery.js"></script>
<script src="../script/vue.js"></script>
<script src="../script/ffkj.js"></script>
<script src="../script/group.js"></script>
<script src="../script/limitchat.js"></script>
<script>
    var regType;
    var view = new Vue({
        el: '#view',
        data: {
            type: 0,
            imgurl: imgurl,
            ffList: [],
            ffInfo: {},
            check_user_status : 0,
            ios: 1, // 1上架 0非上架
            index: 0,
            config:{}
        },
        methods: {
            // 跳转 查看用户详情
            goUserInfo(data) {
                go_userInfo(data.user_id, data.user_name, data.user_sex)
            },
            _url(pageParam, url, login) {
                _url(pageParam, url, login);
            },
            // 返回图片路径
            returnImg(url) {
                return returnImg(url);
            },
            randomSwitchBtn(index) {
                randomSwitchBtn(index);
            },
            openLM(user) {
                var this_user = $api.getStorage('user');

                _ajax('api/member/check_user_status', function(ret, err) {
  
                    switch(ret.data){
                        case 1 :
                            if (this.type == 1) {
                                openLM(user.user_id,'frame0/liaotian_win', 1)
                            } else {
                                openVideoChat(user.user_id,'frame0/liaotian_win', 1)
                            }
                            break;
                        case 2 :
                            if (this.type == 1) {
                                openLM(user.user_id,'frame0/liaotian_win', 1)
                            } else {
                                openVideoChat(user.user_id,'frame0/liaotian_win', 1)
                            }
                            break;
                        case 3 :
                            showDetail('modal/supei_modal')
                            break;
                        case 0 :
   
                        _msg('请先完成真人认证！');              
                        setTimeout(function(){
                            _url({url:'frame4/authentication_frame',title:'真人认证'});
                        },2000)

                            break;        

                    }
                    
                }, {
                    user_id:this_user.id
                })


                


            }
        }
    })
    //
    apiready = function() {
        view.type = api.pageParam['index'] || 0;
        _shangla(function () {
            getData(0);
        })
        _scrollToBottom(function () {
            if (heigutgao == 1) {
                pagenum++;
                getData(pagenum)
            }
        })
    }
    // 获取数据
    function getData(page) {
        var param = {
            user_id: $api.getStorage('userid'),
            latitude: $api.getStorage('lat'),
            longitude: $api.getStorage('lon'),
            video_supei: api.pageParam['index'] == 0,
            voice_supei: api.pageParam['index'] == 1,
        }
        console.log(JSON.stringify(param));
        var loading = page == 0 ? 1 : 0;
        _lists('api/user/index', page, loading, param)
    }
    //
    // function randomSwitchBtn(index) {
    //     api.setFrameGroupIndex({
    //         name: 'item',
    //         index: index,
    //         scroll: false, //是否平滑滚动至目标窗口，即是否带有动画
    //         reload: false, // 刷新
    //     });
    // }
    //
    // // 获取套餐列表
    // function getVip() {
    //     var index = api.pageParam['index'] || 0;
    //     _ajax('api/grade/nobleList', function(ret, err) {
    //         console.log(JSON.stringify(ret))
    //         console.log(JSON.stringify(err))
    //         if (ret.code == 200) {
    //             var result = ret.data;
    //             view.ffList = result;
    //             setTimeout(function() {
    //                 var h = $api.offset($api.dom('header')).h;
    //                 var frmArr = [];
    //                 var paramArr = [];
    //                 for (var i = 0; i < result.length; i++) {
    //                     frmArr.push('frame4/huiyuan');
    //                     var obj = {
    //                         index: i + 1,
    //                         data: result[i]
    //                     }
    //                     paramArr.push(obj);
    //                 }
    //                 groupInit('item', frmArr, h, 0, index, '.item', paramArr, {
    //                     pre: result.length,
    //                     scrollEnabled: false
    //                 });
    //             }, 500)
    //             // for (var i = 0, len = ret.data.length; i < len; i++) {
    //             //     if (view.ffInfo[i].hot == 1) {
    //             //         view.vipObj = view.ffInfo[i];
    //             //     }
    //             // }
    //         }
    //     })
    // }
</script>

</html>